<template>
	<view class="h100 flex-col">
		<view class="p-x-10 p-y-10" style="background: #fff">
			<view class="flex">
				<up-text :text="text" bold size="16"></up-text>
				<uni-data-select v-model="selectValue" :localdata="localdata" placeholder="请选择" />
			</view>
		</view>
		<my-scroll style="height: 500px" @scrolltolower="scrolltolower">
			<my-table :data="tableData" :columns="columns" />
		</my-scroll>
	</view>
</template>

<script setup>
	import {
		getByApiCode,
		getApiFabric
	} from '@/api/customApi';

	let localdata = ref([]),
		selectValue = ref(''),
		text = ref('');

	let fnValue = ref(''),
		fnWid = ref('');

	function fn() {
		getApiFabric({
			apiCode: 'caa76e54-790c-498c-8017-a4fe7084d6b9',
			params: [{
				code: 'productKey',
				value: fnValue.value,
				wid: fnWid.value
			}],
			propertyMapping: {
				key: 'deviceKey',
				name: 'deviceName'
			}
		}).then((res) => {
			res.data.forEach((item) => {
				item.value = item.key;
				item.text = item.name;
				delete item.key;
				delete item.name;
			});
			localdata.value = res.data;
			selectValue.value = localdata.value[0].value;
		});
	}

	let columns = ref([{
				label: '属性',
				prop: '属性',
				width: 100
			},
			{
				label: '属性值',
				prop: '属性值',
				width: 130
			},
			{
				label: '时间',
				prop: '时间'
			}
		]),
		tableData = ref([]),
		pageIndex = ref(1),
		total = ref(0);

	watch(
		() => selectValue.value,
		() => {
			pageIndex.value = 1;
			tableData.value = [];
			fn1();
		}
	);

	let fn1ApiCode = ref(''),
		fn1Wid = ref('');

	function fn1() {
		getApiFabric({
			apiCode: fn1ApiCode.value,
			pageIndex: pageIndex.value,
			pageSize: 20,
			params: [{
					code: 'deviceKeies',
					value: selectValue.value,
					wid: fn1Wid.value
				},
				{
					code: 'pageIndex',
					value: pageIndex.value
				},
				{
					code: 'pageSize',
					value: 20
				},
				{
					code: 'total',
					value: true
				}
			],
			propertyMapping: {
				属性: 'name',
				属性值: 'value',
				时间: 'time'
			},
			total: true
		}).then((res) => {
			tableData.value = res.data;
			total.value = res.total;
		});
	}

	// 滚动到底部加载数据
	function scrolltolower() {
		if (tableData.value.length < total.value) {
			pageIndex.value = pageIndex.value + 1;
			fn1();
		}
	}

	onShow(() => {
		fn();
	});

	onLoad((e) => {
		text.value = e.data;
		if (text.value == '一车间参数详情') {
			fnValue.value = 'STM-DeviceState-Shop01-Product';
			fnWid.value = '6fc57ee0-44b8-11ef-a06c-07b466800d3a';
			fn1ApiCode.value = 'a0dc1914-e6b9-4dae-b8df-793b1bff9bb3';
			fn1Wid.value = '86a3fa4c-89d1-4a2d-8b40-dc7af8b6aeb5';
		} else {
			fnValue.value = 'STM-DeviceState-Shop02-Product';
			fnWid.value = '7a9aeee1-44b8-11ef-a06c-07b466800d3a';
			fn1ApiCode.value = 'd48edbbb-0253-4931-b379-ae01bed05a80';
			fn1Wid.value = '7b997c83-1992-4ce9-8c98-c649508961c7';
		}
	});
</script>

<style lang="scss" scoped></style>